<template>
  <div class="app-container">
    <search-bar class="query-container" :show-search="showSearch" show-more @toggle="searchMore = $event">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item :label="$t('samplesItem')" prop="username">
          <el-input
            v-model="queryParams.item_no"
            :placeholder="$t('inputSamplesItem')"
            clearable
            size="small"
            style="width: 160px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item :label="$t('samplesStatus')" prop="name">
          <el-select v-model="queryParams.status" size="small" clearable :placeholder="$t('inputSamplesStatus')">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('samplesMenuCode')" prop="email">
          <el-input
            v-model="queryParams.menu_code"
            :placeholder="$t('inputSamplesMenuCode')"
            clearable
            size="small"
            style="width: 160px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item v-show="searchMore" :label="$t('samplesValidDate')" prop="email">
          <el-date-picker
            v-model="queryParams.valid_date"
            :placeholder="$t('inputSamplesValidDate')"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item v-show="searchMore" :label="$t('samplesInvalidDate')" prop="email">
          <el-date-picker
            v-model="queryParams.invalid_date"
            :placeholder="$t('inputSamplesInvalidDate')"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >{{ $t('search') }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
            $t('reset')
          }}</el-button>
        </el-form-item>
      </el-form>
    </search-bar>

    <div class="tool-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-auth="['CREATE']"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >{{ $t('addBtn') }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >{{ $t('exportBtn') }}</el-button>
        </el-col>
        <right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="getList" />
      </el-row>
    </div>

    <el-table ref="dataTable" v-loading="loading" :data="samplesList" border :height="tableHeight" @sort-change="sortChange">
      <el-table-column
        :label="$t('samplesItem')"
        sortable
        prop="item_no"
        width="150"
      />
      <el-table-column
        :label="$t('samplesStatus')"
        prop="status_desc"
        sortable
        min-width="100"
      />
      <el-table-column
        :label="$t('samplesMenuCode')"
        prop="menu_desc"
        min-width="100"
      />
      <el-table-column
        :label="$t('samplesWarehouse')"
        prop="warehouse"
        min-width="150"
      />
      <el-table-column
        :label="$t('samplesLocation')"
        prop="location"
        min-width="150"
      />
      <el-table-column
        :label="$t('samplesQuantity')"
        prop="quantity"
        min-width="150"
      />
      <el-table-column
        :label="$t('samplesValidDate')"
        prop="valid_date"
        min-width="110"
      />
      <el-table-column
        :label="$t('samplesInvalidDate')"
        prop="invalid_date"
        min-width="110"
      />
      <el-table-column
        :label="$t('samplesNote')"
        prop="note"
        :show-overflow-tooltip="true"
        min-width="200"
      />
      <el-table-column
        v-if="columns[0].visible"
        :label="$t('createdUser')"
        prop="created"
        min-width="120"
      />
      <el-table-column
        v-if="columns[1].visible"
        :label="$t('createdDate')"
        prop="created_date"
        min-width="180"
      />
      <el-table-column
        v-if="columns[2].visible"
        :label="$t('createdProgram')"
        prop="created_program"
        :show-overflow-tooltip="true"
        min-width="200"
      />
      <el-table-column
        v-if="columns[3].visible"
        :label="$t('updatedUser')"
        prop="updated"
        min-width="120"
      />
      <el-table-column
        v-if="columns[4].visible"
        :label="$t('updatedDate')"
        prop="updated_date"
        min-width="180"
      />
      <el-table-column
        v-if="columns[5].visible"
        :label="$t('updatedProgram')"
        prop="updated_program"
        :show-overflow-tooltip="true"
        min-width="200"
      />
      <el-table-column
        :label="$t('operate')"
        align="center"
        width="250"
        fixed="right"
        class-name="fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >{{ $t('detailBtn') }}</el-button>
          <el-button
            v-auth="['UPDATE']"
            :disabled="scope.row.status === 'C'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >{{ $t('modifyBtn') }}</el-button>
          <el-dropdown
            v-more
            size="mini"
            trigger="click"
            @command="command => handleCommand(command, scope.row)"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right" />{{ $t('moreBtn') }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-auth="['RELEASE']"
                :disabled="scope.row.status === 'R' || scope.row.status === 'C'"
                command="handleRelease"
                icon="el-icon-unlock"
              >{{ $t('releaseBtn') }}</el-dropdown-item>
              <el-dropdown-item
                v-auth="['CLOSE']"
                :disabled="scope.row.status === 'O' || scope.row.status === 'C'"
                command="handleClose"
                icon="el-icon-circle-close"
              >{{ $t('closeBtn') }}</el-dropdown-item>
              <el-dropdown-item
                v-auth="['DELETE']"
                :disabled="scope.row.status !== 'O'"
                command="handleDelete"
                icon="el-icon-delete"
              >{{ $t('deleteBtn') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />

    <SamplesSheetWithMixin ref="samplesSheet" @refreshList="getList" />
    <SamplesInquire ref="samplesInquire" />
  </div>
</template>

<script>
import listMixin from '@/mixins/ListMixin'
import resizeElTableHeightMixin from '@/mixins/ResizeElTableHeightMixin'
import exportExcelMixin from '@/mixins/ExportExcelMixin'
import { mapGetters } from 'vuex';
import { deleteSamplesApi, releaseSamplesApi, closeSamplesApi } from '../api/samples.api';
import { getDropDownCodeTableListApi } from '@/api/common/common'
import SamplesInquire from './SamplesInquire';
import SamplesSheetWithMixin from './SamplesSheetWithMixin';

export default {
  name: 'Samples',
  components: {
    SamplesInquire,
    SamplesSheetWithMixin
  },
  mixins: [listMixin, exportExcelMixin, resizeElTableHeightMixin],
  data() {
    return {
      searchMore: false,
      queryParams: {
        item_no: undefined,
        status: undefined,
        menu_code: undefined,
        valid_date: undefined,
        invalid_date: undefined
      },
      actionFuncName: 'samples/getSamplesList',
      // 显示隐藏列信息
      columns: [
        { key: 0, label: this.$t('createdUser'), visible: false },
        { key: 1, label: this.$t('createdDate'), visible: false },
        { key: 2, label: this.$t('createdProgram'), visible: false },
        { key: 3, label: this.$t('updatedUser'), visible: true },
        { key: 4, label: this.$t('updatedDate'), visible: true },
        { key: 5, label: this.$t('updatedProgram'), visible: false }
      ],
      statusOptions: [],
      actionApi: {
        'delete': deleteSamplesApi,
        'release': releaseSamplesApi,
        'close': closeSamplesApi
      }
    };
  },
  computed: {
    ...mapGetters(['samplesList'])
  },
  methods: {
    initialize() {
      this.handleQueryStatusOptions();
    },
    /** 获取页面状态初始数据 */
    async handleQueryStatusOptions() {
      var params = { 'model': 'Samples', 'field': 'status' }
      var resp = await getDropDownCodeTableListApi(params)
      if (resp.success) {
        this.statusOptions = resp.data;
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    /** 更多操作触发 */
    handleCommand(command, row) {
      switch (command) {
        case 'handleDelete':
          this.handleDelete(row);
          break;
        case 'handleRelease':
          this.handleRelease(row)
          break;
        case 'handleClose':
          this.handleClose(row)
          break;
        default:
          break;
      }
    },
    /** 点击修改按钮 */
    handleUpdate(row) {
      this.$refs.samplesSheet.openSheetDialog({ ...row });
    },
    /** 点击明细按钮 */
    handleDetail(row) {
      this.$refs.samplesInquire.openSheetDialog(row);
    },
    /** 点击新建按钮 */
    handleAdd() {
      this.$refs.samplesSheet.openSheetDialog(undefined);
    },
    /** 点击删除按钮 */
    handleDelete(row) {
      const confirmMessage = this.$t('dataDeleteConfirm', { title: this.$t('samplesItem'), value: row.item_no })
      const successMessage = this.$t('deleteSuccess', { title: this.$t('samplesItem'), value: row.item_no })
      this.handleAction('delete', row.id, confirmMessage, successMessage)
    },
    /** 点击生效按钮 */
    handleRelease(row) {
      const confirmMessage = this.$t('dataReleaseConfirm', { title: this.$t('samplesItem'), value: row.item_no })
      const successMessage = this.$t('releaseSuccess', { title: this.$t('samplesItem'), value: row.item_no })
      this.handleAction('release', row.id, confirmMessage, successMessage)
    },
    /** 点击关闭按钮 */
    handleClose(row) {
      const confirmMessage = this.$t('dataCloseConfirm', { title: this.$t('samplesItem'), value: row.item_no })
      const successMessage = this.$t('closeSuccess', { title: this.$t('samplesItem'), value: row.item_no })
      this.handleAction('close', row.id, confirmMessage, successMessage)
    },
    async handleExport() {
      this.loading = true
      this.autoExportJsonData2Excel(this.samplesList)
      this.loading = false
    }
  }
};
</script>
